<template>
  <div class="info">
    <h3 style="display: inline-block; margin-right: 68%">仓库成员管理</h3>
    <el-button type="warning" @click="toAddTeammate">添加仓库成员</el-button>
    <el-divider />
    <div class="message2">
      <strong> 仓库成员配额说明 </strong>
      <br />
      个人私有仓库最多支持 10
      人协作
    </div>
    <div>
      <h5>查看者({{ viewers.length }})</h5>

      <el-scrollbar max-height="300px">
        <el-checkbox-group v-model="value" size="large" v-loading="loading">
          <el-checkbox
            border
            style="
              display: block;
              width: 600px;
              margin-bottom: 10px;
              height: 50px;
            "
            v-for="viewer in viewers"
            :key="viewer.first"
            :label="viewer.first"
          >
            <div style="display: inline-block; margin-top: 10px">
              <el-avatar class="head">
                {{ viewer.first.slice(0, 1) }}
              </el-avatar>
              <h4 style="display: inline-block">{{ viewer.first }}</h4>
              <p style="display: inline-block">({{ viewer.second }})</p>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </el-scrollbar>

      <div
        style="
          width: 240px;
          margin-top: 50px;
          display: inline-block;
          margin-bottom: 100px;
        "
      >
        <h5>选择要变更权限的成员</h5>
        <el-select v-model="value" multiple placeholder="Select">
          <el-option
            v-for="item in viewers"
            :key="item.first"
            :label="item.first"
            :value="item.first"
          />
        </el-select>
      </div>
      <div style="width: 240px; margin-top: 50px; display: inline-block">
        <h5>选择权限</h5>
        <el-select v-model="power" placeholder="选择权限">
          <el-option label="管理员" :value="1" />
          <el-option label="开发者" :value="2" />
          <el-option label="查看者" :value="3" />
          <el-option label="无权限" :value="4" />
        </el-select>
      </div>
      <el-button type="info" @click="submit">确认变更</el-button>
    </div>
  </div>
</template>


<script>
import request from "@/utils/request";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      viewers: [
        {
          first: "@",
          second: "加载中",
        },
      ],
      value: [],
      power: "",
      loading:true,
    };
  },
  mounted() {
    request
      .get(
        `/house/showhousemember?ownnername=${this.$route.params.username}&housename=${this.$route.params.housename}&type=3`
      )
      .then((res) => {
        console.log(res);
        this.viewers = res.data;
        console.log("new:" + this.viewers);
      });
      this.loading=false;
  },
  methods: {
    submit() {
      request
        .get(
          `/house/changehousemember?username=${this.$route.params.username}&housename=${this.$route.params.housename}&newusernames=${this.value}&type=${this.power}`,
          {}
        )
        .then((res) => {
          console.log(res);
        });
      request
        .get(
          `/house/showhousemember?ownnername=${this.$route.params.username}&housename=${this.$route.params.housename}&type=3`
        )
        .then((res) => {
          console.log(res);
          this.viewers = res.data;
          console.log("new:" + this.viewers);
        });
    },
    toAddTeammate() {
      this.$router.push("housesetting-add");
    },
  },
};
</script>


<style>
.info {
  display: inline-block;
  position: absolute;
  margin-top: 3%;
  margin-left: 5%;
}
.message2 {
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans",
    "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei",
    "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  box-sizing: inherit;
  position: relative;
  min-height: 1em;
  margin: 1em 0em;
  padding: 1em 1.5em;
  line-height: 1.4285em;
  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease,
    box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
  font-size: 1em;
  border-radius: 4px;
  border: 1px solid #e3e9ed;
  background: #fff;
  margin-top: 0em;
  background-color: #fff8db;
  color: #b58105;
  box-shadow: 0px 0px 0px 1px #b58105 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.head {
  font-size: medium;
  background-color: rgb(100, 237, 134);
  text-align: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  margin-right: 5px;
}
.userCard {
  width: 400px;
  height: 50px;
  margin-top: 5px;
  cursor: pointer;
}
</style>